<template>
	<view :class="mode">
		<swiper v-if="items" class="swiper-box" :style="{height:swiperHeight}" indicator-dots=true circular=true interval="5000" duration="700" autoplay=true indicator-active-color="#ffffff" indicator-color="#999999">
			<swiper-item v-for="(img,index) in items" :key="index" style="overflow:hidden;">
				<view class="swiper-item" @click="clickItem(index)">
					<image class="item-image" :src="(img.FileName ? img.FileName : (img.Logo ? img.Logo: img.ImgUrl))" mode="scaleToFill" style="opacity: 1;"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	
	export default {
		components: {
			uniSwiperDot
		},
		name: 'swiper-image',
		props: {
			height:{
				type:Number,
				default:360
			},
			items:{
				type: Array,
				default: undefined
			},
			mode:{
				type: String,
				default: "normal"
			},
			preview:{
				type:[Boolean,String],
				default:false
			}
		},
		data() {
			return {
				swiperHeight:0
			}
		},
		created() {
			this.swiperHeight = uni.upx2px(this.height) + "px";
		},
		computed: {
			getHeight() {
				return uni.upx2px(this.height);
			}
	    },
		methods: {
			change(){
				
			},
			clickItem(index){
				if(this.preview || this.preview==="true")
				{
					var urls = new Array();
					var th = this;
					this.items.forEach(function (value) {
						urls.push(value.FileName);
					});
					uni.previewImage({
						indicator:"indicator",
						current: th.items[index].FileName,
						urls: urls
					});
				}else{
					var item = this.items[index];
					var url = item.Url;
					if(url && url!="")
					{
						if(url.substring(0,4).toLowerCase()=="http")
						{
							//外链跳转
							this.$common.webView(item.Title,url);
						}else{
							//内链跳转
							url = "/" + url.replace(".html","");
							this.$common.to(url);
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100%;
		background: #eee;
		color: #fff;
	}
	
	.item-image {
		width: 100%;
		height: 100%;
	}
	
	.bottom-round{
		uni-swiper .uni-swiper-wrapper{
			border-radius: 0px 0px 8px 8px;
		}
		wx-swiper .uni-swiper-wrapper{
			border-radius: 0px 0px 8px 8px;
		}
		
		.swiper-item,.item-image,.item-image img{
			border-radius: 0px 0px 8px 8px;
		}
	}
	
</style>
